html {
  /*
    NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
    When scrolling to a heading, the heading should
    go below the sticky marketing header. The value
    of the padding depends on the height of the header.
  */
  @media screen and (min-width: 1200px) {
    scroll-padding-top: 92px;
  }
  @media screen and (min-width: 769px) and (max-width: 1199px) {
    scroll-padding-top: 151px;
  }
}

#guide {
  * {
    font-family: Inter, sans-serif;
  }

  hr {
    margin: .5em 0;
  }

  .blockquote {
    font-size: 1rem;
  }

  dt span {
    font-weight: bold;

    code {
      font-size: 16px;
    }
  }

  dd {
    margin: 0 0 0.5em 2em;
  }

  p {
    margin-bottom: 1.15em;
  }

  details {
    margin-bottom: 1.15em;
    border: 1px #D3DAE6 solid;
    border-radius: 3px;
    summary {
      list-style-type: none;
      display: inline-block;
      width: 100%;
      padding: 10px;
      &:before {
        content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.14898 5.10103C5.81704 4.76909 5.81704 4.2309 6.14898 3.89895C6.48093 3.56701 7.01912 3.56701 7.35107 3.89895L11.8511 8.39895C12.183 8.7309 12.183 9.26909 11.8511 9.60103L7.35107 14.101C7.01912 14.433 6.48093 14.433 6.14898 14.101C5.81704 13.7691 5.81704 13.2309 6.14898 12.899L10.0479 8.99999L6.14898 5.10103Z" fill="black"/></svg>');
        display: inline-block;
        transform: translate(0px, 3.5px) rotate(0deg);
        transition: .1s ease-in-out;
        margin-right: 8px;
      }
      &::-webkit-details-marker {
        display: none;
      }
    }
    .content {
      padding: 5px 20px 0px 36px;
    }
  }

  details[open] {
    > summary {
      &:before {
        transform: translate(-3.5px, 0px) rotate(90deg);
        transition: .1s ease-in-out;
      }
    }
  }

  .container-fluid {
    @media screen and (min-width: 1560px) {
      max-width: 1500px;
    }
  }

  .sticky-top-md {
    position: -webkit-relative;
    position: relative;
    @media screen and (min-width: 1200px) {
      position: -webkit-sticky;
      position: sticky;
      top: 72px;
    }
    @media screen and (min-width: 769px) and (max-width: 1199px) {
      position: -webkit-sticky;
      position: sticky;
      top: 131px;
    }
  }

  .sticky-top-lg {
    position: -webkit-relative;
    position: relative;
    @media screen and (min-width: 1200px) {
      position: -webkit-sticky;
      position: sticky;
      /*
        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
        This is dependent on the height of the header.
      */
      top: 72px;
    }
    @media screen and (min-width: 769px) and (max-width: 1199px) {
      position: -webkit-sticky;
      position: sticky;
      /*
        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
        This is dependent on the height of the header.
      */
      top: 131px;
    }
  }

  .h-almost-full-md {
    @media screen and (min-width: 769px) {
      /*
        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
        This is dependent on the height of the header.
      */
      height: 90vh;
    }
  }

  .h-almost-full-lg {
    @media screen and (min-width: 993px) {
      /*
        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
        This is dependent on the height of the header.
      */
      height: 90vh;
    }
  }

  #left_col {
    overflow: auto;
  }

  .aside-heading {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .media-type {
    opacity: 0.6;
    text-transform: uppercase;
    font-size: 80%;
    font-weight: 400;
    margin-bottom: 0px;
  }
}
